<template>
  <view class="page">
    <Tab :tabs="tabs" :current="currentTab" :backgroundColor="color" @change="onChangeTab"></Tab>
    <!-- 全部 -->
    <swiper class="swiper" :current="currentTab" @change="onChangeSwiper">
      <swiper-item v-for="(item, index) in tabs" :key="index">
        <scroll-view
          class="scroll-view"
          :scroll-y="true"
          @scrolltolower="onScrollBottom(item, index)"
        >
          <view class="service-orders">
            <view
              class="service-order"
              v-for="service in item.dataList"
              :key="service.id"
              @click="openDetail(service)"
            >
              <service-log
                :status="service.status"
                :updateTime="service.update_time"
                :createTime="service.create_time"
                :title="service.service_type"
                :no="service.service_no"
              >
              </service-log>
            </view>

            <view
              class="no-data-wrap"
              v-if="!item.dataList || !item.dataList.length"
            >
              <no-data status="no_order" title="还没有相关服务订单"></no-data>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>

    <Message ref="message"></Message>
  </view>
</template>

<script>
import viewModule from "@/common/mixins/view-module";
import noData from "@/components/public/noData/noData";
import { imgBaseUrl, imgBaseUrlV0 } from "@/common/config/index";
import serviceLog from "@/components/public/item/serviceLog";
import Tab from "@/components/public/tabs/service";
export default {
  mixins: [viewModule],
  components: {
    noData,
    serviceLog,
    Tab,
  },
  data() {
    return {
	  color: '#252E43',
      imgBaseUrl,
      imgBaseUrlV0,
      currentTab: 0,
      dataForm: {
        status: 0,
      },
      tabs: [
        {
          value: 0,
          name: "全部",
          dataList: [],
          total: 0,
          page: 0,
        },
        {
          value: 1,
          name: "待审核",
          dataList: [],
          total: 0,
          page: 0,
        },
        {
          value: 2,
          name: "进行中",
          dataList: [],
          total: 0,
          page: 0,
        },
        {
          value: 3,
          name: "已完成",
          dataList: [],
          total: 0,
          page: 0,
        },
        {
          value: 4,
          name: "已关闭",
          dataList: [],
          total: 0,
          page: 0,
        },
      ],
      orderListGroup: {
        allList: [],
        waitToAuditList: [],
        inProcessList: [],
        finishedList: [],
        closedList: [],
      },
      mixinViewOptions: {
        getURL: "/serviceList/serviceDeviceList",
        isPage: true,
        isShowLoading: true,
        reachBottom: true,
        createdIsNeed: false,
        pullDown: true,
      },
    };
  },
  onLoad() {
    this.getDataList(this.currentTab);
  },
  async onPullDownRefresh() {
    this.tabs[this.currentTab].page = 1;
    this.getDataList(this.currentTab);
  },
  methods: {
    fetchComplete(err, data = [], res, index = 0) {
      if (err) return this.message.error(res.message || "获取订单列表失败");
      let item = this.tabs[index];
      console.log(index, "?index", res);
      item.total = res.data.total;
      if (item.page == 1) {
        item.dataList.length = 0;
      }
      item.page = res.data.page;
      item.dataList = item.dataList.concat(data);
      return [];
    },
    onChangeTab(tab, index) {
      this.dataForm.status = tab.value;
      this.currentTab = index;
      let item = this.tabs[index];
      if (!item.dataList.length) {
        this.page = 1;
        this.getDataList(index);
      } else {
        this.page = item.page || 1;
      }
    },
    onChangeSwiper(e) {
      let current = e.detail.current;
      this.currentTab = current;
      this.dataForm.status = this.tabs[current] ? this.tabs[current].value : "";
    },
    openDetail(e) {
      this.$Router.push({
        path: "/pages/service-order-detail/service-order-detail",
        query: {
          id: e.id,
          name: e.device_name,
        },
      });
    },

    onScrollBottom(item, index) {
      if (this.dataListLoading) return;
      console.log("scroll bottom");
      if (item.dataList.length >= item.total) {
        return this.message.success("没有更多啦!");
      }
      item.page += 1;
      this.getDataList(index);
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';

.page {
  min-height: calc(100vh - var(--window-top));
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
}

.swiper, .swiper-item {
  height: calc(100vh - var(--window-top) - 82rpx);
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
}

.scroll-view {
  height: 100%;
}

.service-orders {
  min-height: 100%;
  padding: 20rpx 24rpx;
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);

  .service-order {
    position: relative;
    background-color: #fff;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
  }
}

.no-data-wrap {
  height: calc(100vh - var(--window-top) - 150rpx);
}
</style>